<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天管理</title>
</head>
<link rel="stylesheet" href="plugins/elementui/index.css" />
<script src="plugins/vue.js"></script>
<script src="plugins/elementui/index.js"></script>
<script src="plugins/axios-0.18.0.js"></script>
<body>
    <div id="app">
        <el-table size="medium" current-row-key="id" :data="dataList" stripe highlight-current-row>
            <el-table-column prop="id" label="聊天编号" align="center"></el-table-column>
            <el-table-column prop="application" label="项目" align="center"></el-table-column>
            <el-table-column prop="profile" label="环境" align="center" ></el-table-column>
            <el-table-column prop="label" label="标签" align="center"></el-table-column>
            <el-table-column prop="value" label="聊天开关" align="center">
                <template slot-scope="scope">
                    {{scope.row.value==1 ? "开" : "关"}}
                </template>
            </el-table-column>
            <el-table-column  align="center" label="是否启用">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.value"
                            :active-value="1"
                            :inactive-value="0"
                            active-color="#02538C"
                            inactive-color="#B9B9B9"
                            @change="changeSwitch(scope.row)"/>
                </template>
            </el-table-column>
        </el-table>

    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data:{
            dataList:[

            ],
        },
        mounted(){
            this.load();
        },
        methods:{
            changeSwitch(row){
                //发送请求
                axios.put("updateOne?id="+row.id)
                .then(res=>{
                    if (res.data=="yes"){
                        this.$message.success("状态改变成功")
                    }else {
                        this.$message.error("状态改变失败")
                    }
                })
            },
            load(){
                axios.get("findAll")
                .then(res=>{
                    this.dataList = res.data;
                })
            }
        },

    })
</script>
</html>